<template>
  <div id="orderlistoperation4-box">
    <div id="orderlistoperation4-hread">
      <div class="orderlistoperation4-hread-1">
        <img
          @click="this.$router.go(-1)"
          src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u4348.png"
        />
        <span>订单详情</span>
      </div>
      <div class="orderlistoperation4-hread-2">
        <p style="text-indent: 6%">已退款</p>
      </div>
    </div>
    <div id="orderlistoperation4-body">
      <div class="orderlistoperation4-body-1">
        <div class="ob1-1">
          <div class="bo1-1-1">
            <img
              src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"
            />
          </div>
          <div class="bo1-1-2">
            <span class="ss"
              >【水光针】水光针/皮肤修正/祛痘嫩
              <p>肤/皮肤清洁</p></span
            >
            <p>
              基础套餐
              <span style="margin-left: 100%">*1</span>
            </p>
            <p>
              预约金<span style="color: red">￥299.00</span>到店支付￥699.00
            </p>
          </div>
        </div>
        <div class="bo1-2">
          <p>卷码信息</p>
          <span>预约码：79009009900（已退款）</span>
        </div>
        <div
          class="bo1-3"
          @click="this.$router.push('/orderlist/orderlistrefund')"
        >
          <div class="aasc">退款详情</div>
          <div class="aacsa">
            <img
              src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/keyboard_arrow_right_u1274.png"
            />
          </div>
        </div>
      </div>
      <div class="orderlistoperation4-body-2">
        <p class="ob2-1">广东玉美整形医院</p>
        <p class="ob2-2">
          <img
            src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9382.png"
          />
          <span>广东广州大华区明离路科技园880号</span>
        </p>
      </div>
      <div class="orderlistoperation4-body-3">
        <div class="ob3-1">
          <p>预约金总计<span style="margin-left: 60%">￥599.00</span></p>
          <p>尾款总计<span style="margin-left: 63%">￥599.00</span></p>
          <p>预约金优惠卷<span>-￥9.00</span></p>
        </div>
        <div class="ob3-2">
          <p>
            实付金额（预约金）<span style="color: red; font-size: 16px"
              >￥589.00</span
            >
          </p>
        </div>
      </div>
      <div class="orderlistoperation4-body-4">
        <div class="ob4-1">
          <p>订单编号：<span>418628377</span></p>
          <p>下单时间：<span>2019-02-16 15:36:25</span></p>
          <p>创建时间：<span>2019-02-16 15:36:25</span></p>
          <p>支付时间：<span>2019-02-16 15:36:25</span></p>
          <p>支付方式：<span>支付宝</span></p>
          <p>退款时间：<span>2019-02-16 15:36:25</span></p>
          <p>退款方式：<span>支付宝</span></p>
        </div>
        <div class="ob4-2">
          <div class="ob4-2-1">
            <img
              src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9375.png"
            />
            在线咨询
          </div>
          <div class="ob4-2-2">
            <img
              src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9378.png"
            />
            电话客服
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    function fh() {}
    return {
      fh,
    };
  },
};
</script>

<style scoped>
#orderlistoperation4-box {
  width: 390px;
  height: 1000px;
  background-color: #f2f2f2;
}
/* --------------------------------------------------------- */
#orderlistoperation4-hread {
  width: 100%;
  height: 15%;
  background-color: #ec7b67;
}
.orderlistoperation4-hread-1 {
  width: 100%;
  height: 50%;
  line-height: 100px;
  color: white;
}
.orderlistoperation4-hread-1 span {
  margin-left: 150px;
}
.orderlistoperation4-hread-2 p {
  width: 100%;
  height: 50%;
  color: white;
  line-height: 80px;
}
/* ------------------------------------------------------ */
#orderlistoperation4-body {
  width: 100%;
  height: 85%;
  margin-top: 4%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.orderlistoperation4-body-1 {
  width: 90%;
  height: 26%;
  background-color: white;
  border-radius: 10px;
}
.ob1-1 {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-around;
}
.bo1-1-1 {
  width: 20%;
  height: 90%;
  margin-top: 6%;
}
.bo1-1-2 {
  width: 65%;
  height: 90%;
  margin-top: 6%;
}
.bo1-1-2 p {
  font-size: 12px;
  color: #af9eab;
}
.ss {
  font-size: 14px;
}
/* ---------------------------------------------------------------------- */
.bo1-2 {
  width: 80%;
  height: 30%;
  border-bottom: 1px solid #f2f2f2;
  line-height: 200%;
  margin-left: 7%;
}
.bo1-2 p {
  font-size: 16px;
}
.bo1-2 span {
  font-size: 12px;
  color: #cccccd;
}
.bo1-3 {
  width: 100%;
  height: 20%;
  text-indent: 8%;
  display: flex;
  line-height: 200%;
}
.aasc {
  width: 90%;
}
/* ------------------------------------------------------------------- */
.orderlistoperation4-body-2 {
  width: 90%;
  height: 8%;
  background-color: white;
  border-radius: 10px;
}
.ob2-1 {
  font-size: 16px;
  text-indent: 5%;
  line-height: 300%;
}
.ob2-2 {
  margin-left: 4%;
  font-size: 12px;
  color: #cccccd;
  vertical-align: middle;
}
.ob2-2 span {
  margin-left: 4%;
}
/* -------------------------------------------------------------------- */
.orderlistoperation4-body-3 {
  width: 90%;
  height: 18%;
  background-color: white;
  border-radius: 10px;
}
.ob3-1 {
  width: 100%;
  height: 70%;
  border-bottom: 1px solid #f4f4f4;
  line-height: 250%;
  text-indent: 5%;
}
.ob3-1 p {
  font-size: 12px;
  color: #cccccd;
}
.ob3-1 span {
  font-size: 12px;
  color: black;
  margin-left: 58%;
}

.ob3-2 {
  width: 100%;
  height: 30%;
  line-height: 300%;
}
.ob3-2 p {
  margin-left: 40%;
  font-size: 12px;
}
/* --------------------------------------------------------------------- */
.orderlistoperation4-body-4 {
  width: 90%;
  height: 38%;
  background-color: white;
  border-radius: 10px;
}
.ob4-1 {
  color: #cccccd;
  width: 100%;
  height: 80%;
  border-bottom: 1px solid #f4f4f4;
  margin-top: 4%;
  line-height: 200%;
  text-indent: 7%;
}
.ob4-1 span {
  margin-left: 5%;
}
.ob4-2 {
  width: 100%;
  height: 20%;
  display: flex;
  line-height: 450%;
}
.ob4-2-1 {
  width: 50%;
  height: 100%;
  text-align: center;
}
.ob4-2-2 {
  width: 50%;
  height: 100%;
  text-align: center;
}
</style>  